<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script type="module">
    import { reactive ,effect ,ref ,toRefs ,computed} from './reactivity/reactive.js'
// const product = reactive({
//     price:100,
//     count:10
// })
// let total
// effect(() => {
//     total = product.price*product.count
//     console.log(total)
// })
// product.count = 100
// product.price = 200

// product.count =1

// let price = ref(1)
// let count = ref(100)

// let total
// effect(() => {
//     total = price.value*count.value
//     console.log(total)
// })
// console.log(count)
// count.value = 200
// price.value = 2



// function useProduct(){
//     const product = reactive({
//      price:100,
//      count:10
//     })
//    return toRefs(product)
// }
// const {price,count} = useProduct()
// let total 
// console.log(useProduct())
// effect(()=> {
//     console.log(price)
// total = price.value*count.value
// console.log(total)
// })
// price.value=200
const product = reactive({
    price:100,
    count:10
})
let total = computed(() => {
    return product.count* product.price
})
console.log(total.value)
product.count = 200
console.log(total.value)

</script>

</html>